<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>报修添加</title>
    <script src="${pageContext.request.contextPath}/static/jquery/jquery-3.1.1.js"></script>
    <script src="${pageContext.request.contextPath}/static/jquery/jquery.validate.js"></script>
    <link rel="stylesheet" href="/static/frame/layui/css/layui.css">
    <link rel="stylesheet" href="/static/frame/static/css/style.css">
    <link rel="icon" href="/static/frame/static/image/code.png">
</head>
<style>
    .shelter{
        width:100%;
        height: 100%;
        position: fixed;
        z-index: 50;
        background-color: rgba(0,0,0,0.2);
        display: none;
    }
    .confirm{
        position: fixed;
        width:300px;
        height:150px;
        background-color: rgba(255,255,255,1);
        border-radius:5px;
        margin-left:525px;
        margin-top:200px;
        border:1px solid #CCC;
    }
    .tishiph{
        position: absolute;
        width:18px;
        height:18px;
        margin-left:90px;
        margin-top:40px;
    }
    .tishiph1{
        position: absolute;
        width:18px;
        height:18px;
        margin-left:92px;
        margin-top:40px;
    }
    .confirmword{
        position: absolute;
        font-size: 14px;
        margin-left:115px;
        margin-top:40px;
        color:red;
    }
    .confirmword1{
        position: absolute;
        font-size: 14px;
        margin-left:117px;
        margin-top:40px;
    }
    .close{
        position: absolute;
        margin-left:278px;
        font-size:17px;
        cursor: pointer;
        margin-top:5px;
        width:17px;
        height:17px;
        opacity:0.8;
    }
    .close1{
        position: absolute;
        margin-left:278px;
        font-size:17px;
        cursor: pointer;
        margin-top:5px;
        width:17px;
        height:17px;
        opacity:0.8;
    }
    .cf{
        position: absolute;
        width:120px;
        height:25px;
        margin-left:95px;
        margin-top: 100px;
        font-size:13px;
        border:0px solid #333;
        border-radius:5px;
        text-align: center;
        line-height: 2;
        cursor: pointer;
        background-color: rgba(10,180,0,0.8);
        color:white;
    }
    .cf1{
        position: absolute;
        width:120px;
        height:25px;
        margin-left:95px;
        margin-top: 100px;
        font-size:13px;
        border:0px solid #333;
        border-radius:5px;
        text-align: center;
        line-height: 2;
        cursor: pointer;
        background-color: rgba(10,180,0,0.8);
        color:white;
    }
    .shelter1{
        width:100%;
        height: 100%;
        position: fixed;
        z-index: 50;
        background-color: rgba(0,0,0,0.2);
        display: none;
    }
    .succ{
        position: fixed;
        width:300px;
        height:150px;
        background-color: rgba(255,255,255,1);
        border-radius:5px;
        margin-left:525px;
        margin-top:200px;
        border:1px solid #CCC;
    }
    #repair_user_name-error{
        color:red;
    }
    #repair_user_building-error{
        color:red;
    }
    #repair_user_unit-error{
        color:red;
    }
    #repair_user_housenumber-error{
        color:red;
    }
    #repair_describe-error{
        color:red;
    }
</style>
<body>
<div class="shelter">
    <div class="confirm">
        <div class="tishiph"><img src="${pageContext.request.contextPath}/static/images/tishi.png" style="width:100%;height:100%;"/></div>
        <div class="confirmword">输入的信息有误！</div>
        <div class="close"><img src="${pageContext.request.contextPath}/static/images/close.png" style="width:100%;height:100%;"/></div>
        <input type="button" class="cf" value="确定"/>
    </div>
</div>
<div class="shelter1">
    <div class="succ">
        <div class="tishiph1"><img src="${pageContext.request.contextPath}/static/images/cg.png" style="width:100%;height:100%;"/></div>
        <div class="confirmword1">添加报修成功！</div>
        <div class="close1"><img src="${pageContext.request.contextPath}/static/images/close.png" style="width:100%;height:100%;"/></div>
        <input type="button" class="cf1" value="确定"/>
    </div>
</div>
<form id="addVisitor" class="layui-form">
    <div style="margin-top: 50px;margin-left:50px; ">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label" style="width: 100px;">用户姓名</label>
                <div class="layui-input-inline">
                    <input type="text" id="repair_user_name" placeholder="请输入用户姓名" name="repair_user_name" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label" style="width: 100px;">用户住所</label>
                <div class="layui-input-inline">
                    <input type="text" id="repair_user_building" placeholder="请输入栋数" name="repair_user_building" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-input-inline"style="margin-top:7px;">
                    栋
                </div>
                <div class="layui-input-inline">
                    <input type="text" id="repair_user_unit" placeholder="请输入单元号" name="repair_user_unit" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-input-inline"style="margin-top:7px;">
                    单元
                </div>
                <div class="layui-input-inline">
                    <input type="text" id="repair_user_housenumber" placeholder="请输入房号" name="repair_user_housenumber" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-input-inline"style="margin-top:7px;">
                    号
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label" style="width: 100px;">报修情况</label>
                <div class="layui-input-inline">
                    <input type="text" style="width: 600px;" id="repair_describe" placeholder="请输入报修描述(100字内)" name="repair_describe"  autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" id="submit">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </div>
</form>

<script src="${pageContext.request.contextPath}/static/frame/layui/layui.js" charset="utf-8"></script>
<script>
    layui.use(['form', 'layedit', 'laydate'], function(){
        var form = layui.form
            ,layer = layui.layer
            ,layedit = layui.layedit
            ,laydate = layui.laydate;

        //日期
        laydate.render({
            elem: '#date'
        });
        laydate.render({
            elem: '#date1'
        });
        //时间选择器
        laydate.render({
            elem: '#hour'
            ,type: 'time'
        });

    });
</script>

</body>
<script>
    var w = $(window).width();
    var h = $(window).height();
    $(".pageall").innerHeight(h + "px");
    $(".pageall").innerWidth(w + "px");

    $.validator.addMethod("wordstyle",function(value,element,params){
        var num1=/^(?!、)(?!.*?、$)[a-zA-Z、\u4e00-\u9fa5]+$/;
        if(params=="true"){
            return num1.test(value);
        }
    },"输入的姓名只能由文字、英文以及“、”组成,且不能以“、”开头和结尾！");
    $.validator.addMethod("wordstyle1",function(value,element,params){
        var num1=/^(?!_)(?!.*?_$)[a-zA-Z0-9_]+$/;
        if(params=="true"){
            return num1.test(value);
        }
    },"输入的账号只能由数字、英文以及下划线组成,且不能以下划线开头和结尾！");
    $.validator.addMethod("checkcode",function(value,element){
        var pattern = new RegExp("[`~!@#$^&*()=|{} ':;,.<>/?~！@#￥……&*（）——|【】‘：”“'。？%+ 　\"\\\\]");
        var specialStr = "";
        for(var i=0;i<value.length;i++){
            specialStr += value.substr(i, 1).replace(pattern, '');
        }
        if( specialStr == value){
            return true;
        }
        return false;
    },"禁止输入特殊字符");
    $("#addVisitor").validate({
        rules:{
            repair_user_name:{
                required:true,
                checkcode:true,
                wordstyle:"true"
            },
            repair_user_building:{
                required:true,
                digits:true,
                rangelength:[1,2]
            },
            repair_user_unit:{
                required:true,
                digits:true,
                rangelength:[1,2]
            },
            repair_user_housenumber:{
                required:true,
                digits:true,
                rangelength:[3,3]
            },
            repair_describe:{
                required:true,
                rangelength:[1,100],
                checkcode:true
            },
        },
        messages:{
            repair_user_name:{
                required:"用户必须填写",
                checkcode:"请检查无效字符"
            },
            repair_user_building:{
                required:"栋数必须填写",
                digits:"必须是整数",
                rangelength:"请输入正确栋数"
            },
            repair_user_unit:{
                required:"单元必须填写",
                digits:"必须是整数",
                rangelength:"请输入正确单元号"
            },
            repair_user_housenumber:{
                required:"房号必须填写",
                digits:"必须是整数",
                rangelength:"请输入正确房间号"
            },
            repair_describe:{
                required:"报修描述必须填写",
                rangelength:"只可输入1-100个字",
                checkcode:"请检查无效字符"
            },
        }, submitHandler:function(form){
            $.ajax({
                type:'POST',
                url:"${pageContext.request.contextPath}/repairAddController.do",
                data:{
                    repair_user_name:$("#repair_user_name").val(),
                    repair_user_building:$("#repair_user_building").val(),
                    repair_user_unit:$("#repair_user_unit").val(),
                    repair_user_housenumber:$("#repair_user_housenumber").val(),
                    repair_describe:$("#repair_describe").val(),
                },
                dataType:"json",
                success:function(data){
                    if(data==true){
                        $(".shelter1").css("display","block");
                        $(".cf1").click(function() {
                            $.ajax({
                                type:'POST',
                                url:"${pageContext.request.contextPath}/repairflush.do",
                                data:"",
                                dataType:"json",
                                success:function(data){
                                    if(data==true) {
                                        location.reload(true);
                                    }
                                }
                            });
                        });
                    }if(data==false){
                        $(".shelter").css("display","block");
                        $(".cf").click(function(){
                            $(".shelter").css("display","none");
                        });
                    }
                }
            });
        }
    });
    $(".close").click(function(){
        $(".shelter").css("display","none");
    });
    $(".close1").click(function(){
        $(".shelter1").css("display","none");
        window.location.href="${pageContext.request.contextPath}/repairListAble";
    });
</script>
</html>